<script>
import {data} from "autoprefixer";

export default {
  data() {
    return {
      imageUrl: '',
      goodsList:[{
      }],
      goods:{},
      editDialogVisible:false,
      editedgoods:
        {
        },
      pageable:{
        currentpage:1,
        pagesizes:[2,4,6,8],
        pagesize: 4,
        total:20
      },
    };
  },
  mounted() {
    this.findAllGoods()
  },
  methods:{
    del(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get("/AdminGoods/delete",{
          params:{
            goodsId:row.goodsId
          }
        }).then(res=>{
          if (res.data.code==200){
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.findAllGoods()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
     this.pageable.pagesize=val
      this.findAllGoods()
    },
    handleCurrentChange(val) {
      this.pageable.currentpage=val
      this.findAllGoods()
    },

    findAllGoods(){
      this.$axios.get('AdminGoods/findGoods',{
        params:{
          page:this.pageable.currentpage,
          limit:this.pageable.pagesize
        }
      })
        .then(data=>{
          this.goodsList=data.data.data.records;
          this.pageable.total=data.data.data.total
        })

    },

    save(){
      this.$axios.post('AdminGoods/update', this.editedgoods
      )
        .then(data=>{
          if (data.data.code==200){
            this.$message.success('操作成功');
            this.editDialogVisible = false;
            this.findAllGoods();
          }
        })
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // this.imageUrl = file.response.data
      console.log(file)
      this.editedgoods.goodsPic1=file.response.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    editgoods(id) {
      this.editDialogVisible = true;
      this.$axios.get('/AdminGoods/findOne',{params:{
        gid:id
        }}).then(data=>{
          this.editedgoods=data.data.data
      })
    },
    closeEditDialog() {
      this.editDialogVisible = false;
    },
    //打开模态框
    open(){
      this.editedgoods= {};
      this.editDialogVisible = true;
    },
    //添加商品
    add(){
      this.$axios.post('/AdminGoods/update',this.editedgoods)
        .then(res=>{
          if (res.data.code==200){
            this.$message.success('添加成功');
            this.editDialogVisible = false;
            this.findAllGoods()
          }
        })
    },
  }
}
</script>
<template>
  <div>
    <el-table
      :data="goodsList"
      style="width: 100%">
      <el-table-column
        prop="goodsId"
        label="商品序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="goodsPrice"
        label="商品价格">
      </el-table-column>
      <el-table-column
        label="商品图片">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.goodsPic1"
            fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsInfo"
        label="商品信息">
      </el-table-column>
      <el-table-column
        prop="goodsStock"
        label="商品库存">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button type="success" @click="editgoods(scope.row.goodsId)" size="mini">编辑</el-button><br>
          <el-button type="primary" @click="del(scope.row)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="danger" @click="open" size="medium">添加商品</el-button><br>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page=pageable.currentpage
      :page-sizes=pageable.pagesizes
      :page-size=pageable.pagesize
      layout="total, sizes, prev, pager, next, jumper"
      :total=pageable.total
    >
    </el-pagination>
    <el-dialog
      :visible="editDialogVisible"
      title="编辑商品信息"
      @close="closeEditDialog"
    >
      <el-form :model="editedgoods" ref="editedgoods" >
        <el-form-item label="商品序号" prop="goodsId">
          <el-input v-model="editedgoods.goodsId"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="editedgoods.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="goodsPrice">
          <el-input  v-model="editedgoods.goodsPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" prop="goodsStock">
          <el-input  v-model="editedgoods.goodsStock" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-image
            style="width: 100px; height: 100px"
            :src="editedgoods.goodsPic1"
            fit="fill"></el-image>
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8081/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="editedgoods.goodsPic1" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品信息" prop="goodsInfo">
          <el-input v-model="editedgoods.goodsInfo"></el-input>
        </el-form-item>
        <!-- 其他个人资料字段 -->
        <el-form-item>
<!--          <el-button type="danger" @click="add">添加</el-button>-->
          <el-button type="primary" @click="save">保存</el-button>
<!--          <el-button type="primary" :plain="true" @click="onSubmit">立即修改</el-button>-->
          <el-button @click="resetForm('editedgoods')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
